import Vue from 'vue';
import busHolder from './bus';

let bus = busHolder.getBus;

Vue.component("topnav", {
  template : `
<a-affix :offset-top="0">
<a-layout-header class="header" style="user-select:none;">
  <div class="logo" ></div>
  <a-menu
    theme="dark"
    mode="horizontal"
    :default-selected-keys="[currentUrl]"
    :style="{ lineHeight: '64px' }"
  >
    <a-menu-item v-for="item in menuItems" :key="item.url" @click="handleClick(item)">{{item.name}}</a-menu-item>
  </a-menu>

</a-layout-header>
</a-affix>
  `,
  data : function () {
    return {
      menuItems : [
        {url : '/aurora/gallery', name : '场景展示'},
        {url : '/aurora/monitor', name : '后台监控'},
        {url : '/aurora/toolbox', name : '资源工具'},
      ]
    };
  },

  watch : {
    currentUrl : function () {
      console.log('currentUrl=', this.currentUrl);
    }
  },

  methods : {
    handleClick : function (item) {
      if (item.url !== this.currentUrl) {
        bus().$emit(busHolder.KEY_TOP_NAV_CLICK, item.url);
      }
    }
  },

  props : {
    currentUrl : String
  },

  mounted : function () {
    if (!this.menuItems.length) {
      throw this.menuItems;
    }
  }
});
